@extends('layouts.app')
@section('head')
    <link rel="stylesheet" href="{{ asset('css/phone.css') }}">
@endsection

@section('content')
    <div class="container-fluid">
        <div id="wrapper-wall">
            @foreach ($pages as $page)

                <div class="wrapper">
                    <h4 class="title">{{ $page->name }} <span>v{{$page->version}}</span></h4>
                    <div class="phone view_3">
                        <iframe src="/html/{{$page->asset_id}}/{{ $page->entry }}" class="frame"></iframe>
                        <div class="btn-group ctrl">
                            <button class="btn btn-warning btn-xs" onclick="go('page/{{$page->id}}')">新窗口打开</button>
                            <button class="btn btn-success btn-xs" onclick="location.href='{{route('asset.show',$page->asset_id)}}'">下载</button>
                        </div>
                    </div>
                </div>


            @endforeach
        </div>
        <div class="text-center">
            {!! $pages->links() !!}
        </div>

        <!--Controls etc.-->
        <div id="controls">
            <label for="iframeWidth">Width:</label>
            <input type="number" id="iframeWidth" placeholder="320" value="320" />
            <label for="iframeHeight">Height:</label>
            <input type="number" id="iframeHeight" placeholder="667" value="667" />
            <!--Idea by /u/aerosole-->
            <label for="iframePerspective">Add perspective:</label>
            <input type="checkbox" id="iframePerspective" checked="true" />
        </div>
        <div id="views">
            <button value="1">View 1 - Laying</button>
            <button value="2">View 2 - Side</button>
            <button value="3">View 3 - Front</button>
        </div>

    </div>
@endsection

@section('script')
    <script>
        var phone=$('.phone'),
            iframe=$('.iframe');
        /*View*/
        function updateView(view) {
            if (view) {
                phone.removeClass();
                phone.addClass("phone view_" + view);
            }
        }

        /*Controls*/
        function updateIframe() {
//            iframe.attr('src', document.getElementById("iframeURL").value);

            phone.css('width', document.getElementById("iframeWidth").value + "px");
            phone.css('height' , document.getElementById("iframeHeight").value + "px");

            /*Idea by /u/aerosole*/
            $(".wrapper").css('perspective',(
                document.getElementById("iframePerspective").checked ? "1000px" : "none"
            ));
        }
        updateIframe();

        /*Events*/
        document.getElementById("controls").addEventListener("change", function() {
            updateIframe();
        });

        document.getElementById("views").addEventListener("click", function(evt) {
            updateView(evt.target.value);
        });

        function go(url) {
            window.open(url)
        }
    </script>
@endsection

